<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" id="viewportid" content="target-densitydpi=320,width=640,maximum-scale=1.0,user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="__PUBLIC__/Draw/css/index-draw.css"  type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Draw/css/app.css"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<style>
    /*img {*/
        /*border: 0px none;*/
        /*margin-top: 20px;*/
        /*width: 150px;*/
    /*}*/
</style>
<body>

<div class="topm" id="demo" style="overflow:hidden;">
    <ul id="demo1" style="overflow:hidden;height: auto !important;">
        <foreach item="BonusList" name="BonusList">
            <li>
                <span>{$BonusList['nickname']}</span>在{$BonusList['time']|timeFormat=###}获得{$BonusList['bonusname']}
            </li>
        </foreach>
    </ul>
    <ul style="width:96%;margin-left:15px;height:220px;background:#843fff;line-height:1.8em;color:#ead9ff;overflow:hidden;" id="demo2"></ul>
</div>

<div class="main">
    <div class="turntable" id="lottery">
        <ul class="con">
            <li data-type="{$list1['type']}" data-bonus="{$list1['content']}" data-title="{$list1['title']}" class="bg-1 lottery-unit lottery-unit-0">
                <img src="{$list1['ico']}">
            </li>
            <li data-type="{$list5['type']}"  data-bonus="{$list5['content']}" data-title="{$list5['title']}" class="bg-2 lottery-unit lottery-unit-1">
                <img src="{$list5['ico']}">
            </li>
            <li data-type="{$list2['type']}" data-bonus="{$list2['content']}" data-title="{$list2['title']}" class="bg-3 lottery-unit lottery-unit-2">
                <img src="{$list2['ico']}">
            </li>
            <li data-type="{$list6['type']}" data-bonus="{$list6['content']}" data-title="{$list6['title']}" class="bg-4 lottery-unit lottery-unit-7">
                <img src="{$list6['ico']}">
            </li>
            <li class="bg-5" data-action="start" style="outline:none">
                <div class="btnimg" style="outline:none"></div>
                <div class="timediv hide" style="outline:none">
                    <input type="hidden" id="user_draw_num" value="0" style="outline:none">
                </div>
            </li>
            <li data-type="{$list7['type']}" data-bonus="{$list7['content']}" data-title="{$list7['title']}" class="bg-6 lottery-unit lottery-unit-3">
                <img src="{$list7['ico']}">
            </li>
            <li data-type="{$list3['type']}" data-bonus="{$list3['content']}" data-title="{$list3['title']}" class="bg-7 lottery-unit lottery-unit-6">
                <img src="{$list3['ico']}">
            </li>
            <li data-type="{$list8['type']}" data-bonus="{$list8['content']}" data-title="{$list8['title']}" class="bg-8 lottery-unit lottery-unit-5">
                <img src="{$list8['ico']}">
            </li>
            <li data-type="{$list4['type']}" data-bonus="{$list4['content']}" data-title="{$list4['title']}" class="bg-9 lottery-unit lottery-unit-4">
                <img src="{$list4['ico']}">
            </li>
        </ul>
    </div>
</div>
<!-- 中奖结果 -->

<div class="realThing hide">
    <Div class="bg"></Div>
    <div class="textwrap">
        <div class="formdiv padding20">
            <p id="bonus">获得周黑鸭鸭脖215gX2袋</p>
            <div class="btndiv padding30">
                <button type="button" style="outline:none;" class="useBtn" id="click-jb" value="">点击领取</button>
            </div>
        </div>
        <!--        <p class="looklist "><a href="#"> *中奖纪录中查看此实物免费领取信息</a></p>-->
    </div>
</div>

<!---机会用完-->
<div class="noChance hide" id="noChance">
    <Div class="bg"></Div>
    <div class="textwrapb">
        <h3>
            欢迎明天再来
        </h3>
        <button type="button" style="position: relative;left:50%;margin-left:-125px;" class="useBtn" id="iknow" value="">我知道了</button>
    </div>
</div>

<script type="text/javascript">
    var lottery={
        index:0,	//当前转动到哪个位置
        count:7,	//总共有多少个位置
        timer:0,	//setTimeout的ID，用clearTimeout清除
        speed:100,	//初始转动速度
        times:0,	//转动次数
        cycle:80,	//转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize:5,	//中奖位置
        init:function(id){
            if ($("#"+id).find(".lottery-unit").length>0) {
                $lottery = $("#"+id);
                $units = $lottery.find(".lottery-unit");
                this.obj = $lottery;
                this.count = $units.length;
                $lottery.find(".lottery-unit-"+this.index).addClass("active");
            };
        },
        roll:function(){
            var index = this.index;
            var count = this.count;
            var lottery = this.obj;
            $(lottery).find(".lottery-unit-"+index).removeClass("active");
            index += 1;
            if (index>count-1) {
                index = 0;
            };
            $(lottery).find(".lottery-unit-"+index).addClass("active");
            this.index=index;
            return false;
        },
        stop:function(index){
            this.prize=index;
            return false;
        }
    };

    function roll(){
        lottery.times += 1;
        lottery.roll();
        if (lottery.times > lottery.cycle+10 && lottery.prize==lottery.index) {
            clearTimeout(lottery.timer);
            lottery.prize=-1;
            lottery.times=0;
//            $('.success').html('恭喜你，获得了'+$('.active').index()+'奖');
            var active = $('.active');
            var type = active.attr('data-type');
            var title = active.attr('data-title');
            if(type == "999"){
                $('#bonus').html("真遗憾啊亲，请明天再来哦！");
                setTimeout("$('.noChance').show()",500);
                click=false;
            }else{
                $('#bonus').html("恭喜你获得"+title);
                setTimeout("$('.realThing').show()",500);
                click=false;
            }
        }else{
            if (lottery.times<lottery.cycle) {
                lottery.speed -= 10;
            }else if(lottery.times==lottery.cycle) {
//                var index = Math.random()*(lottery.count)|0;
                var index = lottery.prize|0;
                lottery.prize = index;
            }else{
                if (lottery.times > lottery.cycle+10 && ((lottery.prize==0 && lottery.index==7) || lottery.prize==lottery.index+1)) {
                    lottery.speed += 110;
                }else{
                    lottery.speed += 20;
                }
            }
            if (lottery.speed<40) {
                lottery.speed=40;
            };
            //console.log(lottery.times+'^^^^^^'+lottery.speed+'^^^^^^^'+lottery.prize);
            lottery.timer = setTimeout(roll,lottery.speed);
        }
        return false;
    }

    var click=false;

    window.onload=function(){
        lottery.init('lottery');
        $(".bg-5").click(function(){
            if (click) {
                return false;
            }else{
                $.post('{:U("Draw/GetD")}',{openid:"{$openid}"},function(data){
//                    alert(data)
                    if(data == "gold"){
                        alert("对不起，你的金币不足以此次抽奖");
                    }else if(data == "changce"){
                        alert("你今天的抽奖次数已用完，请明天再来");
                    }else if(data == "sign"){
                        alert("请签到后再来抽奖哦");
                    }/*else if(data == "location"){
                        alert("对不起，此福利只针对重庆市内网友");
                    }*/else{
                        lottery.speed=100;
                        lottery.prize= data;
                        roll();
                        click=true;
                        return false;
                    }
                })
            }
        });
    };
    $('.close').click(function(){
        $('.realThing').hide();
    })

    var t=getid("demo"),t1=getid("demo1"),t2=getid("demo2"),sh=getid("show"),timer;
    t2.innerHTML=t1.innerHTML;
    function mar(){
        if(t2.offsetTop<=t.scrollTop)
            t.scrollTop-=t1.offsetHeight;
        else
            t.scrollTop++;
    }
    timer=setInterval(mar,30);
    function getid(id){
        return document.getElementById(id);
    }
    $("#iknow").click(function(){
        $(".noChance").hide();
        var bonus = $('.active').attr('data-bonus');
        var bonusname = $('.active').attr('data-title');
        var type = $('.active').attr('data-type');
        $.ajax({
            type : 'post',
            url : '{:U("Draw/SaveBonus")}',
            data : {bonus:bonus,type:"999",bonusname:"再接再厉"},
            dataType :'text',
            success:function(data){
//
            }

        })
    });
    $("#click-jb").click(function(){
//        var t = $('.active');
        var bonus = $('.active').attr('data-bonus');
        var bonusname = $('.active').attr('data-title');
        var type = $('.active').attr('data-type');
        $.ajax({
            type : 'post',
            url : '{:U("Draw/SaveBonus")}',
            data : {bonus:bonus,type:type,bonusname:bonusname},
            dataType :'text',
            success:function(data){
//                alert(data);
                if(data == 1){
                    $('.realThing').hide();
                    alert("奖品已派送，请查收哦");
                }
//                else{
//                    $('.realThing').hide();
//                    alert("对不起，你的大渝币不足或者你今日已经抽奖");
//                }
//                alert(data);
            }

        })
    })
    if('{$gold}' < 3){
        alert('对不起，你的金币不足以一次抽奖所需');
        window.location.href="http://weixin.weirongm.com/DaChongQing/News/GetCode/column/4"
    }
</script>

</body>
</html>